if hexo-config('flink_style') == 'butterfly'
  .flink#article-container
    .flink-desc
      margin: .2rem 0 .5rem

    .flink-list
      overflow: auto
      padding: 10px 10px 0
      text-align: center

      & > .flink-list-item
        position: relative
        float: left
        overflow: hidden
        margin: 15px 7px
        width: calc(100% / 3 - 15px)
        height: 90px
        border-radius: 8px
        line-height: 17px
        -webkit-transform: translateZ(0)

        +maxWidth1024()
          width: calc(50% - 15px) !important

        +maxWidth600()
          width: calc(100% - 15px) !important

        &:hover
          img
            transform: rotate(360deg)

        &:before
          position: absolute
          top: 0
          right: 0
          bottom: 0
          left: 0
          z-index: -1
          background: var(--text-bg-hover)
          content: ''
          transition: transform .3s ease-out
          transform: scale(0)

        &:hover:before,
        &:focus:before,
        &:active:before
          transform: scale(1)

        a
          color: var(--font-color)
          text-decoration: none

          img
            float: left
            margin: 15px 10px
            width: 60px
            height: 60px
            border-radius: 35px
            transition: all .3s

          .img-alt
            display: none

          .flink-item-name
            @extend .limit-one-line
            display: block
            padding: 16px 10px 0 0
            height: 40px
            font-weight: bold
            font-size: 1.43em

          .flink-item-desc
            @extend .limit-one-line
            display: block
            padding: 16px 10px 16px 0
            height: 50px
            font-size: .93em
else if hexo-config('flink_style') == 'volantis'
  trans($time = 0.28s)
    transition: all $time ease
    -moz-transition: all $time ease
    -webkit-transition: all $time ease
    -o-transition: all $time ease
  .site-card-group
    display: flex
    flex-wrap: wrap
    justify-content: flex-start
    margin: -0.5 * 16px
    align-items: stretch
  .site-card
    margin: 16px * 0.5
    width: "calc(100% / 4 - %s)" % 16px
    @media screen and (min-width: 2048px)
        width: "calc(100% / 5 - %s)" % 16px
    @media screen and (max-width: 768px)
        width: "calc(100% / 3 - %s)" % 16px
    @media screen and (max-width: 500px)
        width: "calc(100% / 2 - %s)" % 16px
    display: block
    line-height: 1.4
    height 100%
    .img
      width: 100%
      height 120px
      @media screen and (max-width: 500px)
        height 100px
      overflow: hidden
      border-radius: 12px * 0.5
      box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
      background: #f6f6f6
      img
        width: 100%
        height 100%
        // trans(.75s)
        transition: transform 2s ease
        object-fit: cover

    .info
      margin-top: 16px * 0.5
      img
        width: 32px
        height: 32px
        border-radius: 16px
        float: left
        margin-right: 8px
        margin-top: 2px
      span
        display: block
      .title
        font-weight: 600
        font-size: $fontsize-list
        color: #444
        display: -webkit-box
        -webkit-box-orient: vertical
        overflow: hidden
        -webkit-line-clamp: 1
        trans()
      .desc
        font-size: $fontsize-footnote
        word-wrap: break-word;
        line-height: 1.2
        color: #888
        display: -webkit-box
        -webkit-box-orient: vertical
        overflow: hidden
        -webkit-line-clamp: 2
    .img
      trans()
    &:hover
      .img
        box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
      .info .title
        color: #ff5722
else if hexo-config('flink_style') == 'flexcard'
  #article-container img
        margin 0 auto!important
  .flink-list
    overflow auto
    & > a
      width calc(25% - 15px)
      height 130px
      position relative
      display block
      margin 15px 7px
      float left
      overflow hidden
      border-radius 10px
      transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
      box-shadow 0 14px 38px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .06)
      &:hover
        .info
          transform translateY(-100%)
        .wrapper
          img
            transform scale(1.2)
        &:before
          position: fixed
          width:inherit
          margin:auto
          left:0
          right:0
          top:10%
          border-radius: 10px
          text-align: center
          z-index: 100
          content: attr(data-title)
          font-size: 20px
          color: #fff
          padding: 10px
          background-color: rgba($theme-color,0.8)
      .cover
        width 100%
        transition transform .5s ease-out
      .wrapper
        position relative
        .fadeIn
          animation coverIn .8s ease-out forwards
        img
          height 130px
          pointer-events none
      .info
        display flex
        flex-direction column
        justify-content center
        align-items center
        width 100%
        height 100%
        overflow hidden
        border-radius 3px
        background-color hsla(0, 0%, 100%, .7)
        transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
        img
          position relative !important
          top 22px //因为字体大小不同，可能导致头像偏高，可以在此处通过修改top的值来微调头像框的位置至卡片正中。
          width 66px
          height 66px
          border-radius 50%
          box-shadow 0 0 10px rgba(0, 0, 0, .3)
          z-index 1
          text-align center
          pointer-events none
        span
          padding 20px 10% 60px 10%
          font-size 16px
          width 100%
          text-align center
          box-shadow 0 0 10px rgba(0, 0, 0, .3)
          background-color hsla(0, 0%, 100%, .7)
          color var(--font-color)
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
  .flink-list>a .info,
  .flink-list>a .wrapper .cover
    position absolute
    top 0
    left 0

  @media screen and (max-width:1024px)
    .flink-list
      & > a
        width calc(33.33333% - 15px)

  @media screen and (max-width:600px)
    .flink-list
      & > a
        width calc(50% - 15px)

  [data-theme=dark]
    .flink-list a .info,
    .flink-list a .info span
      background-color rgba(0, 0, 0, .6)
    .flink-list
      & > a
        &:hover
          &:before
            background-color: rgba(#121212,0.8);
